/*
 * @Author: puhuaping
 * @Date: 2020-04-13 16:56:23
 */
<style lang="less" scoped>
.merchant-list {
  .btnBox {
    text-align: right;
  }
  .ivu-btn-small {
    padding: 1px 7px;
  }
  .ivu-btn {
    margin: 0 3px;
  }
}
.model-wrap .ivu-form-item {
  margin-bottom: 10px;
}
.flex-table {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}
</style>
<template>
  <div class="merchant-list">
    <Card :bordered="true">
      <Form :label-width="60" inline style="margin-bottom:10px">
        <FormItem label="订单ID">
          <Input
            type="text"
            clearable
            v-model="formSearch.orderId"
            style="width: 180px"
            placeholder="请输入订单ID"
          />
        </FormItem>
        <FormItem label="商品名">
          <Input
            type="text"
            clearable
            v-model="formSearch.goodsName"
            style="width: 180px"
            placeholder="请输入商品名称"
          />
        </FormItem>
        <FormItem label="用户名">
          <Input
            type="text"
            clearable
            v-model="formSearch.userName"
            style="width: 180px"
            placeholder="请输入用户名"
          />
        </FormItem>
        <FormItem label="联系方式">
          <Input
            type="text"
            clearable
            v-model="formSearch.userMobile"
            style="width: 180px"
            placeholder="请输入联系方式"
          />
        </FormItem>
        <FormItem label="支付方式">
          <Select clearable v-model="formSearch.paymentType" style="width:180px">
            <Option value>全部</Option>
            <Option value="WAIT_AUDIT">爱豆支付</Option>
            <Option value="AUDIT_PASS">微信支付</Option>
          </Select>
        </FormItem>
        <FormItem label="发货状态">
          <Select clearable v-model="formSearch.delivery" style="width:180px">
            <Option value>全部</Option>
            <Option value="true">已发货</Option>
            <Option value="false">未发货</Option>
          </Select>
        </FormItem>
        <FormItem label="订单状态">
          <Select clearable v-model="formSearch.state" style="width:180px">
            <Option value>全部</Option>
            <Option value="ORDER_INIT">待支付</Option>
            <Option value="ORDER_PAID">待发货</Option>
            <Option value="ORDER_WAIT_RECEIVING">待收货</Option>
            <Option value="ORDER_CANCELED">已取消</Option>
            <Option value="ORDER_FINISHED">已完成</Option>
          </Select>
        </FormItem>
        <Button type="primary" @click="handleSearch()">查询</Button>
        <Button type="success" @click="lookALL()">查看全部</Button>
      </Form>
      <div class="flex-table">
        <span></span>
        <div>
          <Button type="primary" @click="tableExport">订单导出</Button>
          <Button type="primary" @click="tableImport">订单导入</Button>
        </div>
      </div>
      <!-- 表格 -->
      <tables
        ref="tables"
        :columns="columns"
        search-place="top"
        :searchBtn="false"
        v-model="tableData"
        :page="page"
        :handleChange="handleChange"
      />
    </Card>
    <Modal :mask-closable='false' v-model="showModel1" title="发货" width="300" @on-visible-change="changeModel">
      <Form
        ref="formSubmitRef"
        :model="formSubmitData"
        :rules="formSubmitRule"
        class="model-wrap"
        label-position="left"
        :label-width="100"
      >
        <h3>订单信息：</h3>
        <div style="margin-left:20px;">
          <FormItem label="订单ID">{{curRowData&&curRowData.orderId}}</FormItem>
          <FormItem label="商品信息">{{curRowData&&curRowData.goodsName}}</FormItem>
        </div>
        <h3>收件信息：</h3>
        <FormItem :label-width="20" label>
          {{curRowData&&curRowData.parentOrder&&curRowData.parentOrder.userName+'&nbsp;&nbsp;&nbsp;'+curRowData.parentOrder.userMobile}}
          <br />
          {{curRowData&&curRowData.parentOrder&&curRowData.parentOrder.userAddress}}
        </FormItem>
        <FormItem :label-width="20">
          <RadioGroup v-model="danhao" @on-change="formSubmitData.expressNo=''">
            <Radio :label="1">有运单号</Radio>
            <Radio :label="2">暂无运单号</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem v-if="danhao==1" :label-width="20" prop="expressNo">
          <Input placeholder="请输入快递单号" v-model="formSubmitData.expressNo" />
        </FormItem>
        <FormItem :label-width="20">提示：发货操作后订单将进入待收货状态。</FormItem>
      </Form>
      <div slot="footer">
        <Button type="default" @click="showModel1=false">取消</Button>
        <Button type="primary" @click="sureModel">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import Tables from "@/components/tables/tables.vue";
import { requestData, getData } from "@/api/data";
import { setToken, getToken } from "@/libs/util";
import { isNumber } from "@/tool/validator";
import config from "@/config";
const baseUrl =
  process.env.NODE_ENV === "development"
    ? config.baseUrl.dev
    : config.baseUrl.pro;
export default {
  name: "authentication",
  components: {
    Tables
  },
  data() {
    return {
      danhao: 1,
      showModel1: false,
      showModel2: false,
      page: {},
      tableData: [],
      curRowData: null,
      formSubmitRule: {
        expressNo: [
          {
            required: true,
            message: "请输入快递单号",
            trigger: "blur"
          }
        ]
      },
      formSubmitData: {
        expressNo: ""
      },
      formSearch: {
        orderId: "",
        userMobile: "",
        state: "",
        goodsName: "",
        delivery: "",
        paymentType: "",
        userName: ""
      },
      columns: [
        {
          title: "订单id",
          key: "orderId",
          minWidth: 100,
          align: "center"
        },
        {
          title: "商品名称",
          align: "center",
          key: "goodsName",
          minWidth: 140
        },
        {
          title: "规格",
          align: "center",
          key: "skuName",
          minWidth: 100
        },
        {
          title: "数量",
          align: "center",
          key: "count",
          minWidth: 80
        },
        {
          title: "用户姓名",
          align: "center",
          key: "idcard",
          minWidth: 100,
          render: (h, params) => {
            return h("span", params.row.parentOrder.userName);
          }
        },
        {
          title: "联系方式",
          align: "center",
          key: "idcard",
          minWidth: 100,
          render: (h, params) => {
            return h("span", params.row.parentOrder.userMobile);
          }
        },
        {
          title: "价格",
          align: "center",
          key: "idcard",
          minWidth: 80,
          render: (h, params) => {
            return h("span", params.row.parentOrder.goodsAmount);
          }
        },
        {
          title: "付款方式",
          align: "center",
          key: "idouBalance",
          minWidth: 100,
          render: (h, params) => {
            return h(
              "span",
              params.row.parentOrder.paymentType == "WECHAT"
                ? "微信支付"
                : "爱豆支付"
            );
          }
        },
        {
          title: "下单时间",
          align: "center",
          key: "orderCount",
          minWidth: 100,
          render: (h, params) => {
            return h("span", params.row.parentOrder.paymentTime);
          }
        },
        {
          title: "状态",
          align: "center",
          key: "state",
          minWidth: 100,
          render: (h, params) => {
            let text = {
              ORDER_INIT: "待支付",
              ORDER_CANCELED: "已取消",
              ORDER_FINISHED: "已完成",
              ORDER_PAID: "待发货",
              ORDER_WAIT_RECEIVING: "待收货"
            }[params.row.state];
            return h("span", text);
          }
        },
        {
          title: " ",
          align: "center",
          key: ""
        },
        {
          title: "操作",
          align: "center",
          width: 160,
          fixed: "right",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  attrs: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.$router.push({
                        name: "detailMallOrder",
                        query: { id: params.row.orderDetailId }
                      });
                    }
                  }
                },
                "查看详情"
              ),
              h(
                "Button",
                {
                  attrs: {
                    type: "success",
                    size: "small"
                  },
                  style: {
                    display:
                      params.row.state == "ORDER_PAID" &&
                      params.row.expressNumber
                        ? "inline-block"
                        : "none"
                  },
                  on: {
                    click: () => {
                      this.curRowData = params.row;
                      this.showModel1 = true;
                    }
                  }
                },
                "发货"
              ),
              h(
                "Button",
                {
                  attrs: {
                    type: "success",
                    size: "small"
                  },
                  style: {
                    display:
                      params.row.state == "ORDER_WAIT_RECEIVING" &&
                      !params.row.expressNumber
                        ? "inline-block"
                        : "none"
                  },
                  on: {
                    click: () => {
                      this.curRowData = params.row;
                      this.showModel2 = true;
                    }
                  }
                },
                "补单号"
              )
            ]);
          }
        }
      ]
    };
  },
  methods: {
    //订单导入
    tableImport() {},
    //订单导出
    tableExport() {},
    //model确定
    sureModel() {
      this.$refs.formSubmitRef.validate(valid => {
        if (valid) {
          const curRowData = this.curRowData;
          let dataObj = {
            orderDetailId: curRowData.orderDetailId,
            expressNo: this.formSubmitData.expressNo
          };
          requestData("/admin/mall/order/deliverGoods", "post", dataObj).then(
            res => {
              if (res.data.code == 0) {
                this.$Message.success("操作成功");
                this.showModel1 = false;
                this.getListData();
              } else {
                this.$Message.error(res.data.msg);
              }
              this.showModel = false;
            }
          );
        }
      });
    },
    //模态框改变
    changeModel(e) {
      if (!e) {
        this.curRowData = null;
      }
    },
    lookALL() {
      let formSearch = this.formSearch;
      for (let i in formSearch) {
        formSearch[i] = "";
      }
      this.formSearch = formSearch;
      this.indexPage = 1;
      this.getListData();
    },
    handleSearch() {
      this.indexPage = 1;
      this.getListData();
    },
    //获取分页
    handleChange(e) {
      this.indexPage = e;
      this.getListData();
    },
    getListData() {
      const dataObj = Object.assign(
        {
          page: this.indexPage,
          max: 10
        },
        this.formSearch
      );
      requestData("/admin/mall/order", "get", dataObj).then(res => {
        if (res.data.code == 0) {
          const { pageNumber, totalPage, totalRow } = res.data.page;
          this.page = {
            pageNumber: pageNumber,
            totalPage,
            totalRow: totalRow
          };
          this.tableData = res.data.data || [];
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    }
  },
  mounted() {
    this.getListData();
  }
};
</script>
